<script setup lang="ts">
import dayjs from 'dayjs'
import { getNewsPage } from '@/api/news'
import { getBannerList } from '@/api/banner'

const indexData: any = ref([])
const bannerData: any = ref([])

const el = ref(null)
const show = ref(false)
useIntersectionObserver(el, ([{ isIntersecting }]) => {
  if (isIntersecting)
    show.value = isIntersecting
})

handleGetNewsPage()
handleGetBannerList()
// 获取新闻列表分页
async function handleGetNewsPage() {
  const result: any = await getNewsPage({
    size: 6,
    order: 'index',
    sort: 'asc',
  })
  indexData.value = result.list
}

// 获取轮播图
async function handleGetBannerList() {
  const list: any = await getBannerList({
    order: 'createTime',
    sort: 'asc',
  })
  bannerData.value = list
}

const router = useRouter()
function onClick() {
  router.push('/news')
}

const formatDate = computed(() => {
  return (val: any) => {
    return dayjs(val).format('YYYY-MM-DD')
  }
})

function onClickNews(item: any) {
  router.push(`/newsDetail?id=${item.id}`)
}

function onEnter(el: any, done: any) {
  const delay = el.dataset.index * 200
  const animation = 'fadeInRight 0.8s infinite'
  setTimeout(() => {
    el.style.transition = 'opacity 1s '
    el.style.opacity = 1
    el.style.animation = animation
    el.style['animation-iteration-count'] = 1
    done()
  }, delay)
}
</script>

<template>
  <div class="index">
    <div class="banner">
      <n-carousel autoplay draggable :interval="3000">
        <img v-for="(item, index) in bannerData" :key="index" class="banner-img" :src="item.image">
      </n-carousel>
    </div>
    <div class="content">
      <div class="head">
        <span class="title">公司资讯</span>
        <div class="flex items-center cursor-pointer" @click="onClick">
          <span class="text-[18px] mr-[8px] font-bold">查看更多</span>
          <UnoIcon class="i-ic-baseline-east" />
        </div>
      </div>
      <div ref="el" class="news">
        <transition-group @enter="onEnter">
          <div v-for="(item, index) in indexData" v-show="show" :key="item.id" :data-index="index" class="news-item"
            @click="onClickNews(item)">
            <img class="news-img" :src="item.cover" alt="图片">
            <div class="news-content">
              <span class="news-title" :title="item.title">{{ item.title }}</span>
              <div class="flex items-center">
                <UnoIcon class="i-ic-round-access-time-filled text-theme mr-[8px]" />
                <span class="date-text">{{ formatDate(item.releaseDate) }}</span>
              </div>
            </div>
          </div>
        </transition-group>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index {
  display: flex;
  flex-direction: column;

  .banner {
    width: 100%;
    height: 810px;

    .banner-img {
      width: 100%;
      height: 810px;
      object-fit: cover;
    }

    :deep(.n-carousel__dot) {
      width: 8px;
      height: 8px;
      opacity: 0.1;
      background-color: #000000;

      &.n-carousel__dot--active {
        opacity: 1;
        background-color: var(--theme-color);
      }
    }
  }

  .content {
    width: 1200px;
    margin: 0 auto;
    padding: 100px 0;

    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        font-size: 40px;
        position: relative;
        font-family: PangMenZhengDaoBiaoTiTi;

        &::after {
          left: 0;
          bottom: 0;
          width: 58px;
          height: 2px;
          content: "";
          position: absolute;
          background-color: var(--theme-color);
        }
      }

    }

    .news {
      margin-top: 70px;
      display: grid;
      grid-gap: 30px;
      grid-template-columns: repeat(3, 1fr);

      .news-item {
        flex: 1;
        height: 370px;
        opacity: 0;
        display: flex;
        flex-shrink: 0;
        cursor: pointer;
        flex-direction: column;

        &:hover {
          .news-title {
            color: var(--theme-color);
          }
        }

        .news-img {
          width: 100%;
          height: 200px;
          flex-shrink: 0;
          object-fit: cover;
        }

        .news-content {
          padding: 20px;
          overflow: hidden;
          box-sizing: border-box;
          background-color: #FAFAFA;

          .news-title {
            font-size: 26px;
            font-weight: bold;
            margin-bottom: 10px;
            display: inline-block;
            transition: all 0.2s ease;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .date-text {
            color: var(--theme-color);
            font-size: 16px;
            font-weight: 500;
          }
        }
      }
    }
  }
}
</style>
